{% extends "User_panel/base_user_panel.html" %}
{% block panel-content %}
    <div id="comment-and-rate-panel">
        <h3>Please make comments and ratings for the goods you have bought.</h3>
        {% for order_detail in order.orderDetails_orders.all%}
        <div class="one-comment-rate">
            <div class="comment-rate-product-info float-farther-div">
                <div class="float-left product-image-div"><img src="/{{order_detail.idproduct.image}}" class="product-image" /></div>
                <div class="product-title float-left"><p><a href="/products/{{order_detail.idproduct.id}}">{{order_detail.idproduct.name}}</a></p></div>
                {% if order_detail.product_rates %}
                <div class="product-comment-rate-brief float-left">
                    <p class="product-rate-brief">{{order_detail.product_rates.value}}</p>
                    <p class="product-comment-breif">{{order_detail.comments.content|truncatewords:15}}</p>
                </div>
                <div class="float-right"><img src="/site_media/images/done.png" class="comment-rate-already" /></div>
            </div>
                {% else %}
            </div>
            <form action="" method="post">{% csrf_token %}
            <table border=0>
                <tr>
                    <th width="110px;">Your rating: </th>
                    <td width="180px">
                        <div id="rate-block-1" class="rate-block float-farther-div">
                            <div class="float-left start" onmousemove="rate_change_value(1,1)" title="1"></div>
                            <div class="float-left start" onmousemove="rate_change_value(1,2)" title="2"></div>
                            <div class="float-left start" onmousemove="rate_change_value(1,3)" title="3"></div>
                            <div class="float-left start" onmousemove="rate_change_value(1,4)" title="4"></div>
                            <div class="float-left start" onmousemove="rate_change_value(1,5)" title="5"></div>
                        </div>
                        <input type="hidden" name="o_detail" value="{{order_detail.id}}" />
                        <input type="hidden" name="rate" id="rate-block-1-value-hidden" value=0 />
                    </td>
                    <td align="left"><div class='rate-value' id="rate-block-1-value">0</div></td>
                </tr>
                <tr>
                    <th>Your comment:</th>
                    <td colspan=2>{{form.comment}}</td>
                </tr>
                <tr>
                    <td colspan=3 align="right"><input type="submit" value="Submit" style="margin-right:10px;"/></td>
                </tr>
            </table>
            </form>                    
                {% endif %}
        </div>
        {% endfor %}
    </div><!-- the end of comment-and-rate-panel -->
{% endblock%}